<template>
  <div class="projectTable-container">
    <div class="projectTable">
      <el-table :data="projectTable" :border=false stripe style="width:80%">

        <el-table-column fixed="left" type="expand">
          <template #default="props">
            <div m="4" style="margin: 30;">
              <p m="t-0 b-2"> 标准: {{ props.row.standard }}</p>
              <h3>子项目</h3>
              <el-table :data="props.row.subproject" :border=true stripe>
                <el-table-column label="产品/项目/参数" prop="name" />
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="default">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>

        <el-table-column fixed="left" prop="category" label="项目名" width="280">
        </el-table-column>

        <el-table-column fixed="right" prop="status" label="审批状态" width="120" sortable>
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <el-button @click="handleClick(scope.row)" type="text" size="default">审批</el-button>
        </el-table-column>

      </el-table>
    </div>
    <div class="buttons" style="margin: 20;">
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="9">
          <div class="grid-content bg-purple"><el-button type="primary" @click="handleAddNew">添加新项目</el-button></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import router from '@/router';
import axios from 'axios'
import { useCookies } from "vue3-cookies";
import router from '@/router';
const { cookies } = useCookies();
export default {
  methods: {
    handleClick(row) {
      window.location.href = "/projectDetails";
    },
    async fetchData() {
      const response = await axios.get(
        "http://127.0.0.1:4523/m1/3638436-0-default/api/project",
        {
          headers: {
            satoken: cookies.get("satoken")
          }
        }
      )
      const projData = response.data
      console.log(projData)
      var projectArr = projData.map((proj) => {
        var tmp_proj = {}
        tmp_proj.projectName = proj.category
        tmp_proj.projectState = proj.status
        return tmp_proj
      })
      console.log(projectArr)
      this.projectTable = projData
    },
    handleAddNew() {
      router.push({ path: "/projectFile" }).then(() => { router.go() });
    }
  },
  data() {

    return {
      projectTable: null
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped>
.system-title {}

.projectTable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: center;

}

.buttons {
  width: 100%;
  position: center;
  margin: 20px;
}
</style>